<template>
  <!-- :logo="logoRender"
  :title="title" -->
  <pro-layout
    
    :menus="menus"
    :collapsed="collapsed"
    :mediaQuery="query"
    :isMobile="isMobile"
    :handleMediaQuery="handleMediaQuery"
    :handleCollapse="handleCollapse"
    :i18nRender="i18nRender"
    logo="http://49.234.40.100:88/concept/images/logo1.png"
    v-bind="settings"
  >
  
    <!-- Ads begin
      广告代码 真实项目中请移除
      production remove this Ads
    -->
    <ads v-if="isProPreviewSite && !collapsed"/>
    <!-- Ads end -->

    <setting-drawer :settings="settings" @change="handleSettingChange" />
    <template v-slot:rightContentRender>
      <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" />
    </template>
<template v-slot:footerRender>
      <global-footer />
    </template>
<router-view />
</pro-layout>
</template>

<script>
    import {
        SettingDrawer,
        updateTheme
    } from '@ant-design-vue/pro-layout'
    import {
        i18nRender
    } from '@/locales'
    import {
        mapState
    } from 'vuex'
    import {
        SIDEBAR_TYPE,
        TOGGLE_MOBILE_TYPE
    } from '@/store/mutation-types'

    import defaultSettings from '@/config/defaultSettings'
    import RightContent from '@/components/GlobalHeader/RightContent'
    import GlobalFooter from '@/components/GlobalFooter'
    import Ads from '@/components/Other/CarbonAds'
    import LogoPng from '../assets/logo-gs.png'

    export default {
        name: 'BasicLayout',
        components: {
            SettingDrawer,
            RightContent,
            GlobalFooter,
            Ads
        },
        data() {
            return {
                // preview.pro.antdv.com only use.
                isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
                // end

                // base
                menus: [],
                // 侧栏收起状态
                collapsed: false,
                title: defaultSettings.title,
                settings: {
                    // 布局类型
                    layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
                    // 定宽: true / 流式: false
                    contentWidth: defaultSettings.layout === 'sidemenu' ? false : defaultSettings.contentWidth === 'Fixed',
                    // 主题 'dark' | 'light'
                    theme: defaultSettings.navTheme,
                    // 主色调
                    primaryColor: defaultSettings.primaryColor,
                    fixedHeader: defaultSettings.fixedHeader,
                    fixSiderbar: defaultSettings.fixSiderbar,
                    colorWeak: defaultSettings.colorWeak,

                    hideHintAlert: false,
                    hideCopyButton: false
                },
                // 媒体查询
                query: {},

                // 是否手机模式
                isMobile: false
            }
        },
        computed: {
            ...mapState({
                // 动态主路由
                mainMenu: state => state.permission.addRouters
            })
        },
        created() {
            const routes = this.mainMenu.find(item => item.path === '/')
            this.menus = (routes && routes.children) || []
                // 处理侧栏收起状态
            this.$watch('collapsed', () => {
                this.$store.commit(SIDEBAR_TYPE, this.collapsed)
            })
            this.$watch('isMobile', () => {
                this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
            })
        },
        mounted() {
            const userAgent = navigator.userAgent
            if (userAgent.indexOf('Edge') > -1) {
                this.$nextTick(() => {
                    this.collapsed = !this.collapsed
                    setTimeout(() => {
                        this.collapsed = !this.collapsed
                    }, 16)
                })
            }

            // first update color
            updateTheme(this.settings.primaryColor)
        },
        methods: {
            i18nRender,
            handleMediaQuery(val) {
                this.query = val
                if (this.isMobile && !val['screen-xs']) {
                    this.isMobile = false
                    return
                }
                if (!this.isMobile && val['screen-xs']) {
                    this.isMobile = true
                    this.collapsed = false
                    this.settings.contentWidth = false
                        // this.settings.fixSiderbar = false
                }
            },
            handleCollapse(val) {
                this.collapsed = val
            },
            handleSettingChange({
                type,
                value
            }) {
                console.log('type', type, value)
                type && (this.settings[type] = value)
                switch (type) {
                    case 'contentWidth':
                        this.settings[type] = value === 'Fixed'
                        break
                    case 'layout':
                        if (value === 'sidemenu') {
                            this.settings.contentWidth = false
                        } else {
                            this.settings.fixSiderbar = false
                            this.settings.contentWidth = true
                        }
                        break
                }
            },
            logoRender() {
                return <LogoPng / >
            }
        }
    }
</script>

<style lang="less">
    @import "./BasicLayout.less";
    #logo img {
        width: 155px;
        height: 35px;
    }
    
    .ant-pro-sider-menu-logo {
        background: #fff;
    }
</style>